<template>
  <div id="shopCashier-Box">
      <div id="shopCashier-heard">
        <div class="shopCashier-heard-1">
          <img onclick="fh()" src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BD%91%E7%BB%9C%E5%BC%82%E5%B8%B8/u272.png"/>
          <span>支付收银台</span>
        </div>
        <div class="shopCashier-heard-2">
            <span>￥299.00</span>
              <p>支付剩余时间：01:06:09</p>
        </div>
      </div>
      <div id="shopCashier-body">
        <van-radio-group v-model="checked">
          <van-cell-group inset>
            <van-cell title="支付宝支付" clickable @click="checked = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="微信支付" clickable @click="checked = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
            <van-cell title="招商银行支付" clickable @click="checked = '3'">
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell>
            <van-cell title="余额支付" clickable @click="checked = '4'">
              <template #right-icon>
                <van-radio name="4" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div id="shopCashier-button">
        <van-button color="red" type="primary" block @click="zifu()">确认支付￥299.00</van-button>
      </div>
  </div>
</template>

<script>
  import {ref} from 'vue';
  import {useRouter} from 'vue-router'
export default {
  setup(){
    const router = useRouter();
    function zifu(){
      router.push({path:'shopSuccess'})
    }
    return {
      zifu
    }
  },
  data(){
    return{
      checked:1
    }
  },
  methods:{
    fh(){

    },
  },
 
}
</script>

<style scoped> 
  #shopCashier-Box{width: 390px; height: 844px; background-color: #f2f2f2;}
  /* ------------------------------------------------------------------- */
  #shopCashier-heard{width: 100%; height: 25%; background-color: #ffffff;}
  .shopCashier-heard-1{width: 100%; height: 30%; }
  .shopCashier-heard-1 span{ margin-left: 35%; line-height: 300%;font-size: 20px;}
  .shopCashier-heard-1 img{right: 0;}
  .shopCashier-heard-2{width: 100%; height: 70%; text-align: center;}
  .shopCashier-heard-2 span{font-size: 32px;font-weight: 700;}
  .shopCashier-heard-2 p{margin-top: 5%; line-height: 200%; color: #ffffff; width: 50%;height:20%; border: 1px solid red;margin-left: 25%;border-radius: 50px; background-image: linear-gradient(to right, red,
pink) ;}
/* --------------------------------------------------------------- */
#shopCashier-body{width: 100%;height: 30%;margin-top: 3%; background-color: #ffffff;}
/* ------------------------------------------------------------------------ */
#shopCashier-button{margin-top:5%;}
</style>